<template>
    <div id="view" class="c_all">
        <div class="lef_in_bar">
            <div id="lineBarTab"  class="lef_bar_tab">
                <!--<p style="color:#f7f7f8">15:00-16:00</p>
                <p style="color:#4dadf6">比昨天：<img class="upIcon" src="http://localhost:8080/static/img/analyIcon/icon-let-rise.png"></span>6%</p>
                <p style="color:#4dadf6">比上周：<img class="downIcon" src="http://localhost:8080/static/img/analyIcon/icon-let-droop.png"></span>15%</p>-->
            </div>
            <div id="indexRt" :style="styleIndexRt"></div>
        </div>
        <div class="cen_ex_line">
            <div id="lineTab" class="lef_line_tab">
                <!--<p style="color:#f7f7f8">15:00-16:00</p>
                <p style="color:#4dadf6">比昨天：<img class="upIcon" src="http://localhost:8080/static/img/analyIcon/icon-let-rise.png"></span>6%</p>
                <p style="color:#4dadf6">比上周：<img class="downIcon" src="http://localhost:8080/static/img/analyIcon/icon-let-droop.png"></span>15%</p>-->
            </div>
            <div id="exponent" :style="styleExponent"></div>
         <!--   <a href="#" @click="initExponentLine()">搜索</a>-->
        </div>
        <div class="ri_sta_pie">
            <div id="line_pie_tab" class="ri_pie_tab">
                <!--<p style="color:#4dadf6">截止：10:16</p>-->
            </div>
            <div id="statis" :style="styleStatic"></div>
        </div>
        <div class="le_ro_gu">
            <div class='left_gauge_tab'>
                <p>辖区交通拥堵指数</p>
                <ul>
                    <li><div style="background-color: #00bc52;"></div>畅通（0~2）</li>
                    <li><div style="background-color: #97d158;"></div>基本畅通（2~4）</li>
                    <li><div style="background-color: #f6f954;"></div>轻度拥堵（4~6）</li>
                    <li><div style="background-color: #f1c11f;"></div>中度拥堵（6~8）</li>
                    <li><div style="background-color: #f00100;"></div>严重拥堵（8~10）</li>
                </ul>
            </div>
            <div id="roadIndexA" @click="initRoadBar('A')" class="indexA" :style="styleGuage"></div>
            <div id="roadIndexB" @click="initRoadBar('B')" class="indexB" :style="styleGuage"></div>
            <div id="roadIndexC" @click="initRoadBar('C')" class="indexC" :style="styleGuage"></div>
        </div>
        <div class="ri_ro_bar">
            <div id="raodBar" :style="styleRoadBar"></div>
        </div>

    </div>

</template>
<script>
    import * as globals from '../global'
    import env from '../global/env'
    import rid from '../global/rid'
    /*   import EnterTraffic from './EnterTra/!**!/ffic'*/
    import * as configs from '../config'
    import {mapGetters} from 'vuex'


    var echarts = require('echarts');

    export default{
        name: 'ConditionMap',
        data(){
            return {
                rlatlon:'',
                showLineFlag:false,
                roadTeamId:{
                    idA:'',
                    idB:'',
                    idC:'',
                    idO:'',


                },
                styleIndexRt:{
                    width:'520px',
                    height:'320px'
                },
                styleExponent:{
                    width:'600px',
                    height:'320px'
                },
                styleStatic:{
                    width:'350px',
                    height:'320px'
                },
                styleGuage:{
                    widht:'300px',
                    height:'300px'
                },
                styleRoadBar:{
                    width:'600px',
                    height:'280px'
                }

            }

        },
        components:{


        },
        methods: {
            initIndexRtLine(){
                $.get(globals.URL_BAOTOU_INDEX_BAR).done(function (data) {
                    data = jQuery.parseJSON(data);
                    var indexRtData = data;


                    var po1=$('<p style="color:#f7f7f8">'+indexRtData.current_time+'</p>');
                    var po2='';
                    if(indexRtData.than_yesterday > 0 ){
                        po2 = $('<p style="color:#4dadf6">比昨天：<img class="upIcon" src="static/img/analyIcon/icon-let-rise.png">'+indexRtData.than_yesterday+'</p>');
                    }else{
                        var than_yestaday = -indexRtData.than_yesterday;
                        po2 = $('<p style="color:#4dadf6">比昨天：<img class="downIcon" src="static/img/analyIcon/icon-let-droop.png">'+than_yestaday+'</p>');
                    }
                    var po3='';
                    if(indexRtData.than_lastWeek > 0 ){
                        po3 = $('<p style="color:#4dadf6">比上周：<img class="upIcon" src="static/img/analyIcon/icon-let-rise.png">'+indexRtData.than_lastWeek+'</p>');
                    }else{
                        var than_lastWeek = -indexRtData.than_lastWeek;
                        po3 = $('<p style="color:#4dadf6">比上周：<img class="downIcon" src="static/img/analyIcon/icon-let-droop.png">'+than_lastWeek+'</p>');
                    }
                    $('#lineBarTab').empty().append(po1).append(po2).append(po3);




                    var xData = ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'];
                    var today = new Array();
                    var yesterday = new Array();
                    var lastWeek = new Array();
                    for(var i=0;i<xData.length;i++){
                        if(indexRtData.today_data.length>0){
                            var today_data = indexRtData.today_data
                            var today_flag = false;
                            for(var t=0;t<today_data.length;t++){
                                if(today_data[t].time.split(' ')[1]==xData[i]){
                                    today.push(today_data[t].count);
                                    today_flag = false;
                                    break;
                                }else{
                                    today_flag = true;
                                }

                            }
                            if(today_flag){
                                today.push('');
                            }
                        }
                        if(indexRtData.yesterday_data.length>0){
                            var yesterday_data = indexRtData.yesterday_data
                            var yesterday_flag = false;
                            for(var t=0;t<yesterday_data.length;t++){
                                if(yesterday_data[t].time.split(' ')[1]==xData[i]){
                                    yesterday.push(yesterday_data[t].count);
                                    yesterday_flag = false;
                                    break;
                                }else{
                                    yesterday_flag = true;
                                }

                            }
                            if(yesterday_flag){
                                yesterday.push('');
                            }
                        }
                        if(indexRtData.lastWeek_data.length>0){
                            var lastWeek_data = indexRtData.lastWeek_data
                            var lastWeek_flag = false;
                            for(var t=0;t<lastWeek_data.length;t++){
                                if(lastWeek_data[t].time.split(' ')[1]==xData[i]){
                                    lastWeek.push(lastWeek_data[t].count);
                                    lastWeek_flag = false;
                                    break;
                                }else{
                                    lastWeek_flag = true;
                                }

                            }
                            if(lastWeek_flag){
                                lastWeek.push('');
                            }
                        }
                    }

                    var iChart = echarts.init(document.getElementById('indexRt'));
                    iChart.setOption({
                        title:{
                            text:'交通事故监测',
                            padding: [15, 160],
                            textStyle:{
                                color:'#ebebef',
                            },
                        },
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            right:'2%',
                            bottom:'20%',
                            orient:'vertical',
                            textStyle:{
                                color:'#f7f7f8',
                                fontWeight:20
                            },
                            data:['昨天','今天','上周']
                        },
                        grid: {
                            left: '3%',
                            right: '20%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : {
                            type : 'category',
                            data : xData,
                            axisLabel: {margin: 4,interval:0, textStyle: {color: '#aaa'}},
                            splitLine:{show:true,interval:23,},
                            axisTick:{show:false,},
                        },
                        yAxis : {
                            type : 'value',
                            axisLabel: { textStyle: {color: '#ddd',fontSize:11}},
                        },
                        series : [
                            {
                                name:'昨天',
                                type:'bar',
                                itemStyle:{
                                    normal:{
                                        color:'#0d9af0',
                                    }
                                },
                                data:yesterday
                            },
                            {
                                name:'今天',
                                type:'bar',
                                itemStyle:{
                                    normal:{
                                        color:'#3fc429',
                                    }
                                },
                                data:today
                            },
                            {
                                name:'上周',
                                type:'bar',
                                itemStyle:{
                                    normal:{
                                        color:'#fb7701',
                                    }
                                },
                                data:lastWeek
                            }
                        ]
                    });
                })



            },

            initExponentLine(){
                var dataex='';
                $.get(globals.URL_BAOTOU_INDEX_LINE).done(function (data) {

                    dataex = jQuery.parseJSON(data);
                   /* dataex = data;*/




                    function _contarstTime (time1,time2,line,flag) {
                        var nd = 1000 * 24 * 60 * 60;  //一天的毫秒数
                        var nh = 1000 * 60 * 60;     //一小时的毫秒数
                        var nm = 1000 * 60;        //一分钟的毫秒数
                        var ns = 1000;           //一秒的毫秒数
                        var d1 = new Date(time1);
                        var d2 = new Date(time2);
                        var temp = d2.getTime() - d1.getTime();  //两个日期相差的毫秒数
                        var th = temp % nd / nh;
                        var ph = '';
                        if (th >= 1) {
                            ph = parseInt(th) * 60 + temp % nd % nh / nm;
                        } else {
                            ph = temp % nd % nh / nm;
                        }

                        if (ph != 5 && ph > 5) {

                            d1 = d1.setMinutes(d1.getMinutes() + 5);
                            if (flag) {
                                var hour = new Date(d1).getHours();
                                var minutes = new Date(d1).getMinutes();
                                if((hour+'').length<2){
                                    hour = '0'+hour;
                                }
                                if((minutes+'').length<2){
                                    minutes = '0'+minutes;
                                }
                                xValue.push(hour+':'+minutes);
                            }
                            line.push('2');
                            _contarstTime(d1, time2, line, flag);
                        } else {
                            return;
                        }
                    }




                    var po1=$('<p style="color:#f7f7f8">'+dataex.current_time+'</p>');
                    var po2='';
                    if(dataex.than_yesterday > 0 ){
                        po2 = $('<p style="color:#4dadf6">比昨天：<img class="upIcon" src="static/img/analyIcon/icon-let-rise.png">'+dataex.than_yesterday+'%</p>');
                    }else{
                        var than_yestaday = -dataex.than_yesterday;
                        po2 = $('<p style="color:#4dadf6">比昨天：<img class="downIcon" src="static/img/analyIcon/icon-let-droop.png">'+than_yestaday+'%</p>');
                    }
                    var po3='';
                    if(dataex.than_lastWeek > 0 ){
                        po3 = $('<p style="color:#4dadf6">比上周：<img class="upIcon" src="static/img/analyIcon/icon-let-rise.png">'+dataex.than_lastWeek+'%</p>');
                    }else{
                        var than_lastWeek = -dataex.than_lastWeek;
                        po3 = $('<p style="color:#4dadf6">比上周：<img class="downIcon" src="static/img/analyIcon/icon-let-droop.png">'+than_lastWeek+'%</p>');
                    }
                    $('#lineTab').empty().append(po1).append(po2).append(po3);

                    var today_line = new Array();
                    var yesterday_line = new Array();
                    var lastweek_line = new Array();
                    var xValue = new Array();
                    if(dataex.today_data.length>0){
                        var today_data = dataex.today_data;
                        for(var i=0;i<today_data.length;i++){
                            /*var value = [today_data[i].update_time.split(' ')[1],today_data[i].c_index];*/
                            today_line.push(today_data[i].c_index)
                          /*  _contarstTime(today_data[i].update_time,today_data[i+1].update_time,today_line,false);*/

                            if(today_data[i+1]){
                                _contarstTime(today_data[i].update_time,today_data[i+1].update_time,today_line,false);
                            }else{

                                var newD = new Date();
                                if(new Date(today_data[i].update_time).setMinutes(new Date(today_data[i].update_time).getMinutes()+5) < newD.getTime()){
                                    _contarstTime(today_data[i].update_time,newD.getTime(),today_line,false);
                                }

                            }

                        }
                    }
                    if(dataex.lastWeek_data.length>0){
                        var lastWeek_data = dataex.lastWeek_data;
                        for(var i=0;i<lastWeek_data.length;i++){
                           /* var value = [lastWeek_data[i].update_time.split(' ')[1],lastWeek_data[i].c_index];
                            xValue.push(lastWeek_data[i].update_time.split(' ')[1]);
                            lastweek_line.push(lastWeek_data[i].c_index)*/
                            lastweek_line.push(lastWeek_data[i].c_index)
                            if(lastWeek_data[i+1]){
                                if(lastWeek_data[i].update_time.split(' ')[1] == '00:00'){
                                    _contarstTime(lastWeek_data[i].update_time,lastWeek_data[i+1].update_time,lastweek_line,false);
                                }else{
                                    _contarstTime(lastWeek_data[i].update_time[0]+' 00:00',lastWeek_data[i].update_time,lastweek_line,false);
                                }

                            }else{
                                if(lastWeek_data[i].update_time.split(' ')[1] != '23:55'){
                                    _contarstTime(lastWeek_data[i].update_time,lastWeek_data[i].update_time.split(' ')[0]+' 23:55',lastweek_line,false);
                                }
                            }

                        }
                    }
                    if(dataex.yesterday_data.length>0){
                        var yesterday_data = dataex.yesterday_data;
                        for(var i=0;i<yesterday_data.length;i++){
                           /* var value = [yesterday_data[i].update_time.split(' ')[1],yesterday_data[i].c_index];*/
                            yesterday_line.push(yesterday_data[i].c_index)
                            xValue.push(yesterday_data[i].update_time.split(' ')[1]);
                            if(yesterday_data[i+1]){
                                _contarstTime(yesterday_data[i].update_time,yesterday_data[i+1].update_time,yesterday_line,true);
                            }else{
                                if(yesterday_data[i].update_time.split(' ')[1] != '23:55'){
                                    _contarstTime(yesterday_data[i].update_time,yesterday_data[i].update_time.split(' ')[0]+' 23:55',yesterday_line,true);
                                }

                            }

                        }
                    }


                    var eChart = echarts.init(document.getElementById('exponent'));

                    eChart.setOption({
                        title: {
                            text: '交通指数监测',
                            padding: [15, 160],
                            textStyle:{
                                color:'#ebebef',
                            },
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }

                        },
                        legend: {
                            right:'2%',
                            bottom:'20%',
                            orient:'vertical',
                            textStyle:{
                                color:'#f7f7f8',
                                fontWeight:20
                            },
                            data:['昨天','今天','上周'],
                            selected:{
                                '昨天':true,
                                '今天':true,
                                '上周':false,
                            }
                        },
                        grid: {
                            show:true,
                            left: '3%',
                            right: '20%',
                            bottom: '3%',
                            borderColor:'#3d4c60',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            splitLine: {
                                show: false
                            },
                            axisLabel: {margin: 8, textStyle: {color: '#aaa'}},
                            axisTick:{show:false,},
                            data:xValue
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: { textStyle: {color: '#ddd',fontSize:11}},
                            splitLine:{show:true,},
                            lineStyle:{
                                color:'#3d4c60',
                            }

                        },
                        series: [
                            {
                                name: '今天',
                                type: 'line',
                                showSymbol: false,
                                symbol: 'none',
                                hoverAnimation: false,
                                itemStyle:{
                                    normal:{
                                        color:'#34a02b',
                                    }
                                },
                                data: today_line
                            },
                            {
                                name: '昨天',
                                type: 'line',
                                showSymbol: false,
                                symbol: 'none',
                                hoverAnimation: false,
                                itemStyle:{
                                    normal:{
                                        color:'#0288ce',
                                    }
                                },
                                data: yesterday_line
                            },
                            {
                                name: '上周',
                                type: 'line',
                                showSymbol: false,
                                symbol: 'none',
                                hoverAnimation: false,
                                itemStyle:{
                                    normal:{
                                        color:'#bb5d0d',
                                    }
                                },
                                data: lastweek_line
                            }
                        ]
                    })
                });


            },
            contrastTime(time1,time2){

            },
            initStatisPie(){
                $.get(globals.URL_BAOTOU_INDEX_PIE).done(function (data) {
                    data = jQuery.parseJSON(data);

                    var po1=$('<p style="color:#4dadf6">截止：'+data.current_time+'</p>');

                    $('#line_pie_tab').empty().append(po1);

                    var sChart = echarts.init(document.getElementById('statis'));


                    sChart.setOption({
                        title : {
                            text: '事件源统计',
                            x:'center',
                            padding: [15, 160],
                            textStyle:{
                                color:'#ebebef',
                            },
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            left:'right',
                            bottom:'30%',
                            left:'70%',
                            orient:'vertical',
                            textStyle:{
                                color:'#f7f7f8',
                                fontWeight:20
                            },
                            data: ['交通事故','交通管制','施工占道','上报拥堵']
                        },
                        grid: {
                            left: '10%',

                            bottom: '3%',
                            containLabel: true
                        },
                        series : [
                            {
                                name: '事故源统计',
                                type: 'pie',
                                radius : ['0','65%'],
                                center: ['35%', '60%'],
                                avoidLabelOverlap:false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                },
                                data:[
                                    {
                                        value:data.accidenCount,
                                        name:'交通事故',
                                        itemStyle:{
                                            normal:{
                                                color:'#fbc328'
                                            },
                                            emphasis:{
                                                color:'#fbc328'
                                            }
                                        }
                                    },
                                    {
                                        value:data.controlCount,
                                        name:'交通管制',
                                        itemStyle:{
                                            normal:{
                                                color:'#8564e6'
                                            },
                                            emphasis:{
                                                color:'#8564e6'
                                            }
                                        }
                                    },
                                    {
                                        value:data.constructionCount,
                                        name:'施工占道',
                                        itemStyle:{
                                            normal:{
                                                color:'#3bc224'
                                            },
                                            emphasis:{
                                                color:'#3bc224'
                                            }
                                        }
                                    },
                                    {
                                        value:data.jamCount,
                                        name:'上报拥堵',
                                        itemStyle:{
                                            normal:{
                                                color:'#259bf2'
                                            },
                                            emphasis:{
                                                color:'#259bf2'
                                            }
                                        }
                                    }
                                ]
                            }
                        ]
                    })
                })


            },
            initRoadGauge(){
                $.get(globals.URL_BAOTOU_INDEX_GAUGE).done(function (data) {
                    data = jQuery.parseJSON(data);
                    var sAChart = echarts.init(document.getElementById('roadIndexA'));
                    var sBChart = echarts.init(document.getElementById('roadIndexB'));
                    var sCChart = echarts.init(document.getElementById('roadIndexC'));

                    rid.roadTeamId.idA = data[0].teamName+','+data[0].teamCode;
                    rid.roadTeamId.idB = data[1].teamName+','+data[1].teamCode;
                    rid.roadTeamId.idC = data[2].teamName+','+data[2].teamCode;
                    console.log(rid.roadTeamId.idA+'-------'+rid.roadTeamId.idB+'---------------'+rid.roadTeamId.idC);
                    sAChart.setOption({
                        tooltip : {
                            formatter: "{a} <br/>{c} {b}"
                        },
                        series : [
                            {
                                name:'辖区拥堵指数',
                                type:'gauge',
                                center:['50%','50%'],
                                min:0,
                                max:10,
                                splitNumber:10,
                                radius: '60%',
                                axisLine: {            // 坐标轴线
                                    lineStyle: {       // 属性lineStyle控制线条样式
                                        color: [[0.2, '#00bc52'],[0.4, '#97d158'],[0.6, '#f6f954'],[0.8, '#f1c11f'],[1, '#f00100']],
                                        width: 0,//默认透明
                                        shadowBlur: 0
                                    }
                                },
                                axisLabel: {            // 坐标轴小标记
                                    textStyle: {       // 属性lineStyle控制线条样式
                                        fontWeight: 'bolder',
                                        color: '#0c7ad5',
                                        shadowColor : '#fff', //默认透明
                                        shadowBlur: 10,
                                        fontSize:18,
                                    }
                                },
                                axisTick: {            // 坐标轴小标记
                                    length :10,        // 属性length控制线长
                                    lineStyle: {       // 属性lineStyle控制线条样式
                                        color: 'auto',
                                        shadowColor : '#fff', //默认透明
                                        shadowBlur: 10
                                    }
                                },
                                splitLine: {           // 分隔线
                                    length :15,         // 属性length控制线长
                                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                        width:6,
                                        color: 'auto',
                                        shadowColor : '#fff', //默认透明
                                        shadowBlur: 0
                                    }
                                },
                                pointer: {           // 分隔线

                                    width:6
                                },
                                itemStyle:{
                                    normal:{
                                        color:'#f4f5f5',
                                        boderType:'dotted'
                                    },
                                    emphasis:{
                                        color:'#f4f5f5'
                                    }
                                },
                                title : {

                                    offsetCenter:[0,'110%'],
                                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                        fontWeight: 'bolder',
                                        fontSize: 18,
                                        fontStyle: 'normal',
                                        color: '#0c80e1',
                                        shadowColor : '#fff', //默认透明
                                        shadowBlur: 10
                                    }
                                },
                                detail : {
                                    backgroundColor: '#091a30',
                                    borderWidth: 0,
                                    width:40,
                                    height:40,
                                    borderColor: '#fff',
                                    shadowColor : '#fff', //默认透明
                                    offsetCenter: [0, '65%'],       // x, y，单位px
                                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                        fontWeight: 'bolder',
                                        color: '#f5f5f5'
                                    }
                                },
                                data:[{value: data[0].c_index, name: data[0].teamName}]
                            }
                        ]
                    })
                            sBChart.setOption({
                                tooltip : {
                                    formatter: "{a} <br/>{c} {b}"
                                },
                                series : [
                                    {
                                        name:'辖区拥堵指数',
                                        type:'gauge',
                                        center:['50%','50%'],
                                        min:0,
                                        max:10,
                                        splitNumber:10,
                                        radius: '60%',
                                        axisLine: {            // 坐标轴线
                                            lineStyle: {       // 属性lineStyle控制线条样式
                                                color: [[0.2, '#00bc52'],[0.4, '#97d158'],[0.6, '#f6f954'],[0.8, '#f1c11f'],[1, '#f00100']],
                                                width: 0,//默认透明
                                                shadowBlur: 0
                                            }
                                        },
                                        axisLabel: {            // 坐标轴小标记
                                            textStyle: {       // 属性lineStyle控制线条样式
                                                fontWeight: 'bolder',
                                                color: '#0c7ad5',
                                                shadowColor : '#fff', //默认透明
                                                shadowBlur: 10,
                                                fontSize:18,
                                            }
                                        },
                                        axisTick: {            // 坐标轴小标记
                                            length :10,        // 属性length控制线长
                                            lineStyle: {       // 属性lineStyle控制线条样式
                                                color: 'auto',
                                                shadowColor : '#fff', //默认透明
                                                shadowBlur: 10
                                            }
                                        },
                                        splitLine: {           // 分隔线
                                            length :15,         // 属性length控制线长
                                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                                width:6,
                                                color: 'auto',
                                                shadowColor : '#fff', //默认透明
                                                shadowBlur: 0
                                            }
                                        },
                                        pointer: {           // 分隔线

                                            width:6
                                        },
                                        itemStyle:{
                                            normal:{
                                                color:'#f4f5f5',
                                                boderType:'dotted'
                                            },
                                            emphasis:{
                                                color:'#f4f5f5'
                                            }
                                        },
                                        title : {

                                            offsetCenter:[0,'110%'],
                                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                                fontWeight: 'bolder',
                                                fontSize: 18,
                                                fontStyle: 'normal',
                                                color: '#0c80e1',
                                                shadowColor : '#fff', //默认透明
                                                shadowBlur: 10
                                            }
                                        },
                                        detail : {
                                            backgroundColor: '#091a30',
                                            borderWidth: 0,
                                            width:40,
                                            height:40,
                                            borderColor: '#fff',
                                            shadowColor : '#fff', //默认透明
                                            offsetCenter: [0, '65%'],       // x, y，单位px
                                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                                fontWeight: 'bolder',
                                                color: '#f5f5f5'
                                            }
                                        },
                                        data:[{value: data[1].c_index, name: data[1].teamName}]
                                    }
                                ]
                            })

                    sCChart.setOption({
                        tooltip : {
                            formatter: "{a} <br/>{c} {b}"
                        },
                        series : [
                            {
                                name:'辖区拥堵指数',
                                type:'gauge',
                                center:['50%','50%'],
                                min:0,
                                max:10,
                                splitNumber:10,
                                radius: '60%',
                                axisLine: {            // 坐标轴线
                                    lineStyle: {       // 属性lineStyle控制线条样式
                                        color: [[0.2, '#00bc52'],[0.4, '#97d158'],[0.6, '#f6f954'],[0.8, '#f1c11f'],[1, '#f00100']],
                                        width: 0,//默认透明
                                        shadowBlur: 0
                                    }
                                },
                                axisLabel: {            // 坐标轴小标记
                                    textStyle: {       // 属性lineStyle控制线条样式
                                        fontWeight: 'bolder',
                                        color: '#0c7ad5',
                                        shadowColor : '#fff', //默认透明
                                        shadowBlur: 10,
                                        fontSize:18,
                                    }
                                },
                                axisTick: {            // 坐标轴小标记
                                    length :10,        // 属性length控制线长
                                    lineStyle: {       // 属性lineStyle控制线条样式
                                        color: 'auto',
                                        shadowColor : '#fff', //默认透明
                                        shadowBlur: 10
                                    }
                                },
                                splitLine: {           // 分隔线
                                    length :15,         // 属性length控制线长
                                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                        width:6,
                                        color: 'auto',
                                        shadowColor : '#fff', //默认透明
                                        shadowBlur: 0
                                    }
                                },
                                pointer: {           // 分隔线

                                    width:6
                                },
                                itemStyle:{
                                    normal:{
                                        color:'#f4f5f5',
                                        boderType:'dotted'
                                    },
                                    emphasis:{
                                        color:'#f4f5f5'
                                    }
                                },
                                title : {

                                    offsetCenter:[0,'110%'],
                                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                        fontWeight: 'bolder',
                                        fontSize: 18,
                                        fontStyle: 'normal',
                                        color: '#0c80e1',
                                        shadowColor : '#fff', //默认透明
                                        shadowBlur: 10
                                    }
                                },
                                detail : {
                                    backgroundColor: '#091a30',
                                    borderWidth: 0,
                                    width:40,
                                    height:40,
                                    borderColor: '#fff',
                                    shadowColor : '#fff', //默认透明
                                    offsetCenter: [0, '65%'],       // x, y，单位px
                                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                        fontWeight: 'bolder',
                                        color: '#f5f5f5'
                                    }
                                },
                                data:[{value: data[2].c_index, name: data[2].teamName}]
                            }
                        ]
                    })
                   /* this.roadTeamId.idA = '1111';
                    this.roadTeamId.idB = data[1].teamCode;
                    this.roadTeamId.idC = data[2].teamCode;
                    this.roadTeamId.idO = data[0].teamCode;*/




                })
                this.roadTeamId.idA = rid.roadTeamId.idA;
                this.roadTeamId.idB = rid.roadTeamId.idB;
                this.roadTeamId.idC = rid.roadTeamId.idC;




            },

            initRoadBar(teamFlag){
                if(!teamFlag){
                    $.get(globals.URL_BAOTOU_INDEX_GAUGE).done(function (team) {

                        team = jQuery.parseJSON(team);
                        teamFlag = team[0].teamName+','+team[0].teamCode;
                        _initIndexYbar(teamFlag)
                    })


                }else{
                    if(teamFlag == 'A'){
                        teamFlag = rid.roadTeamId.idA;
                    }else if(teamFlag == 'B'){
                        teamFlag = rid.roadTeamId.idB;
                    }else if(teamFlag == 'C'){
                        teamFlag = rid.roadTeamId.idC;
                    }
                    _initIndexYbar(teamFlag)
                }
                function _initIndexYbar(teamId){
                    $.get(globals.URL_BAOTOU_INDEX_YBAR+'?teamID='+teamId.split(',')[1]).done(function (data) {
                         var bData = jQuery.parseJSON(data)


                        var myChart = echarts.init(document.getElementById('raodBar'));

                        var xValue = new Array();
                        var yValue = new Array();
                        if(bData.length>10){
                            for(var i=9;i>=0;i--){
                                xValue.push(bData[i].roadname);
                                yValue.push(bData[i].c_index);
                            }
                        }else{
                            for(var i=bData.length-1;i>=0;i--){
                                xValue.push(bData[i].roadname);
                                yValue.push(bData[i].c_index);
                            }
                        }

                        // 绘制图表
                        myChart.setOption({
                            title:{
                                text:teamId.split(',')[0]+'-道路拥堵指数',
                                padding: [15, 160],
                                textStyle:{
                                    color:'#ebebef',
                                },
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            barCategoryGap:'8',
                            barWidth:'12',
                            grid:{
                                show:true,
                                left: '20px',
                                top:'60px',
                                bottom:'0px',
                                containLabel: true,
                            },
                            xAxis: {
                                type:'value',
                                axisLabel: {margin: 2, textStyle: {color: '#aaa'}},
                            },
                            yAxis: {
                                data: xValue,
                                axisLabel: {interval: 0, textStyle: {color: '#ddd',fontSize:15}},
                            },
                            series: [{
                                name: '辖区道路指数',
                                type: 'bar',
                                itemStyle:{
                                    normal:{
                                        color:'#2a9bf0',
                                        barBorderRadius:[0,100,100,0],
                                    },
                                },
                                data: yValue,
                            }]
                        });

                    })
                }
            },
            initIndexWH(){


                var offsetWidth = document.body.offsetWidth;  //1535
                var offsetHeight = document.body.offsetHeight;  //735


                /*根据浏览器窗口加载左上柱状图*/
                var widthRt = parseInt(520/1530*offsetWidth);
                var heightRt = parseInt(320/735*offsetHeight);
                this.styleIndexRt={
                    width:widthRt+'px',
                    height:heightRt+'px'
                }
                $('.lef_in_bar').css('width',widthRt+'px');
                var indexRt_tab_top =parseInt(93/320*heightRt);
                var idnexRt_tab_left = parseInt(433/520*widthRt);
                $('.lef_bar_tab').css('margin-top',indexRt_tab_top+'px');
                $('.lef_bar_tab').css('margin-left',idnexRt_tab_left+'px');


                /*中间折线图*/
                var exponentWidht = parseInt(600/1530*offsetWidth);
                var exponentHeight = parseInt(320/735*offsetHeight);
                this.styleExponent={
                    width:exponentWidht+'px',
                    height:exponentHeight+'px'
                }
                var widthCen = parseInt(620/1530*offsetWidth);
                $('.cen_ex_line').css('width',widthCen+'px');
                var exponent_tab_top =parseInt(93/320*exponentHeight);
                var exponent_tab_left = parseInt(520/620*exponentWidht);
                $('.lef_line_tab').css('margin-top',exponent_tab_top+'px');
                $('.lef_line_tab').css('margin-left',exponent_tab_left+'px');

                /*右上饼状图*/
                var staticWidht = parseInt(350/1530*offsetWidth);
                var staticHeight = parseInt(320/735*offsetHeight);
                this.styleStatic={
                    width:staticWidht+'px',
                    height:staticHeight+'px'
                }
                var widthStatic = parseInt(350/1530*offsetWidth);
                $('.ri_sta_pie').css('width',widthStatic+'px');
                var static_tab_top =parseInt(68/320*staticHeight);
                var static_tab_left = parseInt(253/375*widthStatic);
                $('.ri_pie_tab').css('margin-top',static_tab_top+'px');
                $('.ri_pie_tab  ').css('margin-left',static_tab_left+'px');

                /*左下三个油表图*/
                /*一*/
                var guageWidht = parseInt(300/1530*offsetWidth);
                var guageHeight = parseInt(300/735*offsetHeight);
                this.styleGuage={
                    width:guageWidht+'px',
                    height:guageHeight+'px'
                }
                var widthGauge = parseInt(900/1530*offsetWidth);
                var heightGauge = parseInt(300/735*offsetHeight);
                $('.le_ro_gu').css('width',widthGauge+'px');
                $('.le_ro_gu').css('height',heightGauge+'px');
                $('.le_ro_gu').css('margin-top',parseInt(25/735*offsetHeight)+'px');

                var gauge_top_left =parseInt(20/300*heightGauge);
                $('.indexA').css('top',gauge_top_left+'px');

                var gauge_top_center =parseInt(20-guageHeight);
                var gauge_left_center = parseInt(guageWidht);
                $('.indexB').css('top',gauge_top_center+'px');
                $('.indexB').css('margin-left',gauge_left_center+'px');

                var gauge_top_right =parseInt(20-2*guageHeight);
                var gauge_left_right = parseInt(2*guageWidht);
                $('.indexC').css('top',gauge_top_right+'px');
                $('.indexC').css('margin-left',gauge_left_right+'px');

                /*tab*/
                $('.left_gauge_tab').css('width',(widthGauge-2)+'px');
                $('.left_gauge_tab p').css('margin-top',parseInt(8/300*heightGauge)+'px');
                $('.left_gauge_tab ul').css('margin-left',parseInt(88/900*widthGauge)+'px');


                /*右下柱状图*/
                var widthBar = parseInt(600/1530*offsetWidth);
                var heightBar = parseInt(280/735*offsetHeight);
                this.styleRoadBar={
                    width:widthBar+'px',
                    height:heightBar+'px'
                }
                $('.ri_ro_bar').css('width',widthBar+'px');
                $('.ri_ro_bar').css('height',parseInt(300/735*offsetHeight)+'px');
                var bar_tab_top =parseInt(25/735*offsetHeight);
                var bar_tab_left = parseInt(22/1530*offsetWidth);
                $('.ri_ro_bar').css('margin-top',bar_tab_top+'px');
                $('.ri_ro_bar').css('margin-left',bar_tab_left+'px');

            }
        },

        mounted(){
            this.initIndexWH();
            this.initIndexRtLine();
            this.initExponentLine();
            this.initStatisPie();
            this.initRoadGauge();
            this.initRoadBar();
        },
        computed: {

        }

    }

</script>
<style scope>
    .c_all{
        background-color:#031320;
    }
    .cen_ex_line{
        float:left;
        width:620px;
        background-color:#091a30;
        margin-left:15px;
        margin-top:30px;
        border: 1px solid #696262;

    }
    .lef_in_bar{
        float:left;
        width:520px;
        background-color:#091a30;
        margin-top:30px;
        border: 1px solid #696262;
    }
    .lef_bar_tab{
        margin-left: 433px;
        margin-top: 93px;
        position: absolute;
        font-size:14px;
    }
    .lef_line_tab{
        margin-left: 520px;
        margin-top: 93px;
        position: absolute;
        font-size:14px;
    }
    .ri_pie_tab{
        margin-left: 253px;
        margin-top: 68px;
        position: absolute;
        font-size:14px;
    }
    .lef_bar_tab,.lef_line_tab,.ri_pie_tab p{
        font-weight:800;
    }
    .upIcon {
        height: 13px;
        width: 14px;
    }
    .downIcon{
        height: 13px;
        width: 14px;
        margin-top:-4px;
    }
    .ri_sta_pie{
        float:right;
        width:350px;
        background-color:#091a30;
        margin-top:30px;
        border: 1px solid #696262;
        margin-right:14px;
    }
    .le_ro_gu{
        float:left;
        width:900px;
        height:300px;
        background-color:#091a30;
        margin-top:25px;
        border: 1px solid #696262;
    }
    .indexA{

        top:20px;
    }
    .indexB{
        margin-left:300px;
        top:-280px;
    }
    .indexC{
        margin-left:600px;
        top:-580px;
    }
    .left_gauge_tab{
        position: absolute;
        background-color: #091a30;
        width: 900px;


    }
    .left_gauge_tab p{
        color: #ebebef;
        font-weight:700;
        font-size: 21px;
        text-align: center;
        margin-top:8px;
    }
    .left_gauge_tab ul{
        margin-left:88px;
    }
    .left_gauge_tab ul li{
        float: left;
        margin-left: 40px;
        list-style: none;
        font-weight:bold;
        color:#ebebef;
    }
    .left_gauge_tab ul li div{
        width:15px;
        height:13px;
        background-color: #00bc52;
        position: absolute;
        margin-left: -20px;
        margin-top: 3px;
    }
    .ri_ro_bar{
        float:left;
        width:600px;
        background-color:#091a30;
        height:300px;
        margin-left:22px;
        margin-top:25px;
        border: 1px solid #696262;
    }


</style>